<template>
	<view style="background-color: #f2f2f2;position: relative;">
		<view ref="fixedTop" style="position: fixed;top:0;z-index: 99;">
			<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" title="售后订单"></com-nav-bar>
			
			<u-tabs :list="statusOptions" :is-scroll="false" :current="currentIndex" @change="statusChange" active-color="#ff9900"></u-tabs>
		</view>
		
		<view :style="{marginTop:fixedTopHeight+'px'}" style="padding: 20rpx;min-height: 100vh;">
			<view v-if="dataList.length > 0" v-for="(item,index) in dataList" :key="index" style="padding: 20rpx;background-color: #fff;border-radius: 10rpx;margin-bottom: 20rpx;">
				<view style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 20rpx;margin-bottom: 20rpx;border-bottom: 1rpx solid #f2f2f2;">
					<view style="font-size: 10pt;font-weight: 600;">{{item.refund_no}}</view>
					<view style="font-size: 9pt;color:#ff9900;">{{item.status | refundStatusDesc}}</view>
				</view>
				
				<!-- 订单商品信息 -->
				<u-read-more show-height="350" :toggle="true" text-indent="0" close-text="展开">
					<view style="display: flex;padding: 20rpx 0;" v-for="(itm,idx) in item.orderDetails" :key="idx" @click="openUrl('/pages/goods/detail?proId='+itm.goods_id)">
						<image style="width: 200rpx;height: 200rpx;margin-right: 20rpx;flex-shrink:0;" lazy-load="true" :src="jsonFormat(itm.extend).cover_pic"></image>
						<view style="height:200rpx;display: flex;flex-direction: column;justify-content: space-between;flex-grow: 1;">
							<view v-line-clamp='2' style="font-size: 28rpx;height: 56rpx;line-height: 28rpx;">{{jsonFormat(itm.extend).goods_name}}</view>
							<view v-line-clamp='2' style="font-size: 10pt;color: #909399;">{{jsonFormat(itm.extend).attr_str}}</view>
							<view style="font-size: 12pt;">
								<text style="font-weight: 600;margin-right: 20rpx;">x{{itm.goods_num}}</text>
							</view>
						</view>
					</view>
				</u-read-more>
				
				<view style="display: flex;justify-content: space-between;padding-top: 20rpx;margin-top: 20rpx;border-top: 1rpx solid #f2f2f2;">
					<view>订单金额：￥{{item.pay_price}}</view>
					<view style="font-weight: 600;">{{item.scheme.scheme_type | schemeTypeFilter}}</view>
					
				</view>
				
				<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 40rpx;font-size: 9pt;">
					<view>{{formatTimeToStr(item.created_at)}}</view>
					<u-button type="warning" plain size="mini" shape="circle" style="margin: 10rpx;" @click="openUrl('/pages/order/refunds/detail?refund_id='+item.id)">查看详情</u-button>
				</view>
			</view>
			
			<u-loadmore style="padding: 20rpx 0;" :status="loadStatus" />
		</view>
		
	</view>
</template>

<script>
	
	import {formatTimeToStr} from "@/utils/date";
	let that;
	export default{
		data(){
			return {
				fixedTopHeight:0,
				statusOptions:[
					{name: '全部',value:'all'},
					{name: '待确认',value:'20'},
					{name: '协调中',value:'30'},
					{name: '已完成',value:'100'}
				],
				currentIndex:0,
				
				loadStatus:'nomore',
				searchForm:{
					status:'',
				},
				pagination:{
					page_count:0,
					current_page:1,
					total_count:0,
				},
				dataList:[]
			}
		},
		onLoad(){
			this.getRefundLst();
		},
		onShow(){
			this.$nextTick(function(){
				that.fixedTopHeight = Math.ceil(that.$refs.fixedTop.$el.clientHeight);
			})
		},
		beforeCreate(){
			that = this;
		},
		computed: {
			jsonFormat(){
				return data => {
					if( typeof data == 'string'){
						data = JSON.parse(data);
					}
					return data ?? {};
				}
			},
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm')
			},
		},
		filters: {
			refundStatusDesc(type){
				const refundStatusMaps = {
					'20': '待确认',
					'25': '待确认',
					'30': '协调中',
					'35': '协调中',
					'40': '协调中',
					'100': '售后完成'
				}
				return refundStatusMaps[type] ?? '未知';
			},
			schemeTypeFilter(type){
				const schemeTypeMaps = {
					'only_refund': '仅退款',
					'return_refund': '退货退款',
					'return_exchange': '退货换货',
					'only_exchange': '不退货换货',
				}
				return schemeTypeMaps[type] ?? '未知';
			}
		},
		methods:{
			back(){
				that.navBack()
			},
			statusChange(index){
				this.currentIndex = index;
				this.searchForm.status = this.statusOptions[index].value;
				this.initData();
				this.getRefundLst();
			},
			async getRefundLst(){
				this.loadStatus = 'loading';
				let { current_page, pageSize } = this.pagination;
				
				let res = await this.$http.request({
					url: this.$api.v2Order.refundOrderLst,
					method: 'POST',
					data: {page: current_page,...this.searchForm},
					showLoading:true
				});
				this.loadStatus = 'nomore';
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				let { list, pagination } = res.data;
				this.dataList = this.dataList.concat(list);
				this.pagination = pagination;
				if (this.pagination.current_page < this.pagination.page_count) {
					this.loadStatus = 'loadmore';
				}
			},
			initData(){
				this.dataList = [];
				this.pagination = {
					page_count:0,
					current_page:1,
					total_count:0,
				};
			},
			openUrl(url){
				uni.navigateTo({url});
			},
			gotoRefundDetail(row){
				console.log(123213,row)
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.initData();
				this.getRefundLst();
			}, 1000);
		},
		onReachBottom() {
			let { current_page, page_count } = this.pagination;
			if (current_page >= page_count) {
				this.loadStatus = 'nomore';
				return;
			}
			this.pagination.current_page++;
			this.getRefundLst();
		}
	}
</script>

<style>
</style>